import axios from 'axios'
import store from '@/store'

// 导入 获取 更新token 的 api接口函数
import { refreshToken } from '@/api/user.js'

// axios.defaults.baseURL
// 由于 后台服务器 拆成了 不同的 业务项目(微服务)
// 所以 需要 使用 若干个 有不同 基地址的 axios对象来分别请求
// 此时，可以通过 axios.create 创建不同配置的 axios对象
const axios1 = axios.create({
  baseURL: 'http://toutiao.itheima.net/'
  // transformResponse: [function(data) {
  //   // console.log('transformResponse', JSON.parse(data))
  //   return data
  // }]
})

// 请求拦截器-------------------
axios1.interceptors.request.use(function (config) {
  // a.取出 用户信息对象
  const user = store.state.user
  // b.判断 是否包含 用户token
  if (!config.headers.Authorization && user && user.token) {
    // c.向 请求报文头 追加 token
    config.headers.Authorization = 'Bearer ' + user.token
  }
  // d.返回 修改后的 配置对象
  return config
})

// 响应拦截器-------------------
// 添加【响应拦截器】:每次响应报文 接收完毕后，就会先执行
//  - 传入 响应成功回调函数 和 失败回调函数
// 成功回调函数：当 响应状态码 是 1/2 开头的，才执行
// 失败回调函数：当 响应状态码 不是 1/2开头的，才执行
axios1.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, async function (err) {
  console.log('响应拦截器begin：-----------------')
  if (err.response.status === 401) {
    // 【如果token失效】如果 vuex中 有 user.refreshtoken，我们就 自动 获取新的 token
    // 0.如果 vuex中有 token且有refreshtoken
    // const refreshToken = store.state.user && store.state.user.refresh_token
    const token2 = store.state.user?.refresh_token
    if (token2) {
      // 1.则发送 refreshToken 到服务器接口 获取 【新的token】
      const { data: res } = await refreshToken(token2)
      // 2.拿到新token后，重新保存到 vuex 和 本地localStorage 中
      store.commit('refreshToken', res.data.token)
      // 3.【重新请求业务接口】将 新token 设置给 axios本次请求的 配置对象
      err.config.headers.Authorization = 'Bearer ' + res.data.token
      return axios1.request(err.config)
    }
  }
  // 调用 用户的 catch 函数/代码块
  return Promise.reject(err)
})

export default axios1
